ജാവാസ്ക്രിപ്റ്റ് ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ: JSON മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യാനുള്ള ആധുനികവും സുരക്ഷിതവുമായ മാർഗ്ഗം

വർഷങ്ങളായി, ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്പർമാർ ഒരു ലളിതമായ കാര്യത്തിനായി ബുദ്ധിമുട്ടുകയായിരുന്നു: JSON ഫയലുകൾ ലോഡ് ചെയ്യുക. വെബിലെ ഡാറ്റാ കൈമാറ്റത്തിനുള്ള മാനദണ്ഡം ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റ് നൊട്ടേഷൻ (JSON) ആണെങ്കിലും, അതിനെ ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂളുകളുമായി തടസ്സങ്ങളില്ലാതെ സംയോജിപ്പിക്കുന്നത് പലപ്പോഴും സങ്കീർണ്ണമായ കോഡുകളും താൽക്കാലിക പരിഹാരങ്ങളും സുരക്ഷാപരമായ അപകടസാധ്യതകളും നിറഞ്ഞതായിരുന്നു. Node.js-ലെ സിൻക്രണസ് ഫയൽ റീഡുകൾ മുതൽ ബ്രൗസറിലെ ദൈർഘ്യമേറിയ `fetch` കോളുകൾ വരെ, പരിഹാരങ്ങൾ ഒരു യഥാർത്ഥ ഫീച്ചറിനേക്കാൾ ഉപരി താൽക്കാലിക സംവിധാനങ്ങളായിട്ടാണ് അനുഭവപ്പെട്ടത്. ആ കാലഘട്ടം ഇപ്പോൾ അവസാനിക്കുകയാണ്.

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ ലോകത്തേക്ക് സ്വാഗതം, എക്മാസ്ക്രിപ്റ്റ് ഭാഷയെ നിയന്ത്രിക്കുന്ന കമ്മറ്റിയായ TC39 സ്റ്റാൻഡേർഡ് ചെയ്ത ഒരു ആധുനികവും സുരക്ഷിതവും ലളിതവുമായ പരിഹാരം. ലളിതവും എന്നാൽ ശക്തവുമായ `with { type: 'json' }` സിന്റാക്സോടെ അവതരിപ്പിച്ച ഈ ഫീച്ചർ, ജാവാസ്ക്രിപ്റ്റ് അല്ലാത്ത അസറ്റുകൾ കൈകാര്യം ചെയ്യുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിക്കുകയാണ്, അതിൽ ഏറ്റവും സാധാരണമായ JSON-ൽ നിന്ന് തുടങ്ങുന്നു. ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ എന്താണെന്നും, അവ പരിഹരിക്കുന്ന നിർണായക പ്രശ്നങ്ങൾ എന്തൊക്കെയാണെന്നും, കൂടുതൽ വൃത്തിയുള്ളതും സുരക്ഷിതവും കാര്യക്ഷമവുമായ കോഡ് എഴുതാൻ നിങ്ങൾക്ക് അവ എങ്ങനെ ഉപയോഗിച്ചു തുടങ്ങാമെന്നും ഈ ലേഖനം ആഗോള ഡെവലപ്പർമാർക്ക് ഒരു സമഗ്രമായ മാർഗ്ഗനിർദ്ദേശം നൽകുന്നു.

പഴയ കാലം: ജാവാസ്ക്രിപ്റ്റിൽ JSON കൈകാര്യം ചെയ്തിരുന്നതിലേക്ക് ഒരു തിരിഞ്ഞുനോട്ടം

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ സവിശേഷത പൂർണ്ണമായി മനസ്സിലാക്കാൻ, അവ മാറ്റിസ്ഥാപിക്കുന്ന പഴയ രീതികളെക്കുറിച്ച് നാം ആദ്യം മനസ്സിലാക്കണം. പ്രവർത്തിക്കുന്ന എൻവയോൺമെന്റ് (സെർവർ-സൈഡ് അല്ലെങ്കിൽ ക്ലയിന്റ്-സൈഡ്) അനുസരിച്ച്, ഡെവലപ്പർമാർ വിവിധ സാങ്കേതിക വിദ്യകളെ ആശ്രയിച്ചിരുന്നു, ഓരോന്നിനും അതിൻ്റേതായ ഗുണദോഷങ്ങളുണ്ടായിരുന്നു.

സെർവർ-സൈഡ് (Node.js): `require()`, `fs` കാലഘട്ടം

വർഷങ്ങളോളം Node.js-ൽ നിലനിന്നിരുന്ന CommonJS മൊഡ്യൂൾ സിസ്റ്റത്തിൽ, JSON ഇംപോർട്ട് ചെയ്യുന്നത് വളരെ ലളിതമായിരുന്നു:

// ഒരു CommonJS ഫയലിൽ (ഉദാ. index.js) const config = require('./config.json'); console.log(config.database.host);

ഇത് മനോഹരമായി പ്രവർത്തിച്ചു. Node.js യാന്ത്രികമായി JSON ഫയലിനെ ഒരു ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റാക്കി മാറ്റും. എന്നിരുന്നാലും, എക്മാസ്ക്രിപ്റ്റ് മൊഡ്യൂളുകളിലേക്കുള്ള (ESM) ആഗോള മാറ്റത്തോടെ, ഈ സിൻക്രണസ് `require()` ഫംഗ്ഷൻ ആധുനിക ജാവാസ്ക്രിപ്റ്റിന്റെ അസിൻക്രണസ് സ്വഭാവവുമായി പൊരുത്തപ്പെടാതെയായി. ഇതിന് നേരിട്ടുള്ള ESM ബദലായ `import`, തുടക്കത്തിൽ JSON മൊഡ്യൂളുകളെ പിന്തുണച്ചിരുന്നില്ല, ഇത് ഡെവലപ്പർമാരെ പഴയതും കൂടുതൽ സങ്കീർണ്ണവുമായ രീതികളിലേക്ക് മടങ്ങാൻ നിർബന്ധിതരാക്കി:

// ഒരു ESM ഫയലിൽ നേരിട്ട് ഫയൽ വായിക്കുന്നത് (ഉദാ. index.mjs) import fs from 'fs'; import path from 'path'; const configPath = path.resolve('config.json'); const configFile = fs.readFileSync(configPath, 'utf8'); const config = JSON.parse(configFile); console.log(config.database.host);

ഈ സമീപനത്തിന് നിരവധി പോരായ്മകളുണ്ട്:

• ദൈർഘ്യം: ഒരൊറ്റ പ്രവർത്തനത്തിനായി ഒന്നിലധികം വരികളുള്ള ബോയിലർപ്ലേറ്റ് കോഡ് ആവശ്യമാണ്.
• സിൻക്രണസ് I/O: `fs.readFileSync` ഒരു ബ്ലോക്കിംഗ് പ്രവർത്തനമാണ്, ഇത് ഉയർന്ന കൺകറൻസിയുള്ള ആപ്ലിക്കേഷനുകളിൽ പ്രകടനത്തെ ബാധിക്കാം. ഇതിന്റെ അസിൻക്രണസ് പതിപ്പ് (`fs.readFile`) കോൾബാക്കുകളോ പ്രോമിസുകളോ ഉപയോഗിച്ച് കൂടുതൽ സങ്കീർണ്ണത വർദ്ധിപ്പിക്കുന്നു.
• ഏകീകരണത്തിന്റെ അഭാവം: ഇത് മൊഡ്യൂൾ സിസ്റ്റത്തിൽ നിന്ന് വേറിട്ടുനിൽക്കുന്നതായി തോന്നിപ്പിക്കുന്നു, JSON ഫയലിനെ നേരിട്ട് പാഴ്സ് ചെയ്യേണ്ട ഒരു സാധാരണ ടെക്സ്റ്റ് ഫയലായി പരിഗണിക്കുന്നു.

ക്ലയിന്റ്-സൈഡ് (ബ്രൗസറുകൾ): `fetch` API ബോയിലർപ്ലേറ്റ്

ബ്രൗസറിൽ, സെർവറിൽ നിന്ന് JSON ഡാറ്റ ലോഡ് ചെയ്യാൻ ഡെവലപ്പർമാർ ദീർഘകാലമായി `fetch` API-യെ ആശ്രയിച്ചിരുന്നു. ഇത് ശക്തവും വഴക്കമുള്ളതുമാണെങ്കിലും, ലളിതമായി ചെയ്യേണ്ട ഒരു ഇംപോർട്ടിന് ഇത് കൂടുതൽ കോഡ് ആവശ്യപ്പെടുന്നു.

// സാധാരണ fetch രീതി let config; fetch('/config.json') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON ബോഡി പാഴ്സ് ചെയ്യുന്നു }) .then(data => { config = data; console.log(config.api.key); }) .catch(error => console.error('Error fetching config:', error));

ഈ രീതി ഫലപ്രദമാണെങ്കിലും, ഇതിന് ചില പോരായ്മകളുണ്ട്:

• ബോയിലർപ്ലേറ്റ്: ഓരോ JSON ലോഡിനും സമാനമായ പ്രോമിസുകളുടെ ശൃംഖല, റെസ്പോൺസ് പരിശോധന, എറർ ഹാൻഡ്‌ലിംഗ് എന്നിവ ആവശ്യമാണ്.
• അസിൻക്രണസ് ഓവർഹെഡ്: `fetch`-ന്റെ അസിൻക്രണസ് സ്വഭാവം കൈകാര്യം ചെയ്യുന്നത് ആപ്ലിക്കേഷൻ ലോജിക്കിനെ സങ്കീർണ്ണമാക്കും, ലോഡിംഗ് ഘട്ടം കൈകാര്യം ചെയ്യാൻ പലപ്പോഴും സ്റ്റേറ്റ് മാനേജ്മെന്റ് ആവശ്യമായി വരുന്നു.
• സ്റ്റാറ്റിക് അനാലിസിസ് ഇല്ല: ഇത് ഒരു റൺടൈം കോൾ ആയതിനാൽ, ബിൽഡ് ടൂളുകൾക്ക് ഈ ഡിപൻഡൻസി എളുപ്പത്തിൽ വിശകലനം ചെയ്യാൻ കഴിയില്ല, ഇത് ഒപ്റ്റിമൈസേഷനുകൾ നഷ്ടപ്പെടുത്താൻ സാധ്യതയുണ്ട്.

ഒരു ചുവട് മുന്നോട്ട്: അസേർഷനുകളോടുകൂടിയ ഡൈനാമിക് `import()` (മുൻഗാമി)

ഈ വെല്ലുവിളികൾ തിരിച്ചറിഞ്ഞ്, TC39 കമ്മിറ്റി ആദ്യം ഇംപോർട്ട് അസേർഷനുകൾ നിർദ്ദേശിച്ചു. ഒരു ഇംപോർട്ടിനെക്കുറിച്ചുള്ള മെറ്റാഡാറ്റ നൽകാൻ ഡെവലപ്പർമാരെ അനുവദിക്കുന്ന, ഒരു പരിഹാരത്തിലേക്കുള്ള സുപ്രധാന ചുവടുവെപ്പായിരുന്നു ഇത്.

// യഥാർത്ഥ ഇംപോർട്ട് അസേർഷൻസ് നിർദ്ദേശം const configModule = await import('./config.json', { assert: { type: 'json' } }); const config = configModule.default;

ഇതൊരു വലിയ മെച്ചപ്പെടുത്തലായിരുന്നു. ഇത് JSON ലോഡിംഗിനെ ESM സിസ്റ്റത്തിലേക്ക് സംയോജിപ്പിച്ചു. ലോഡ് ചെയ്ത റിസോഴ്സ് ഒരു JSON ഫയൽ തന്നെയാണോ എന്ന് പരിശോധിക്കാൻ `assert` ക്ലോസ് ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിനോട് പറഞ്ഞു. എന്നിരുന്നാലും, സ്റ്റാൻഡേർഡൈസേഷൻ പ്രക്രിയയിൽ, ഒരു നിർണ്ണായകമായ അർത്ഥപരമായ വ്യത്യാസം ഉയർന്നുവന്നു, ഇത് ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളിലേക്കുള്ള അതിന്റെ പരിണാമത്തിന് കാരണമായി.

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ വരവ്: ഒരു ഡിക്ലറേറ്റീവും സുരക്ഷിതവുമായ സമീപനം

വിപുലമായ ചർച്ചകൾക്കും എഞ്ചിൻ നിർമ്മാതാക്കളിൽ നിന്നുള്ള ഫീഡ്‌ബായ്ക്കിനും ശേഷം, ഇംപോർട്ട് അസേർഷനുകൾ ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളായി പരിഷ്കരിച്ചു. സിന്റാക്സിൽ ചെറിയ വ്യത്യാസമുണ്ടെങ്കിലും, അർത്ഥത്തിലുള്ള മാറ്റം വളരെ വലുതാണ്. JSON മൊഡ്യൂളുകൾ ഇംപോർട്ട് ചെയ്യാനുള്ള പുതിയ, സ്റ്റാൻഡേർഡ് രീതി ഇതാണ്:

സ്റ്റാറ്റിക് ഇംപോർട്ട്: import config from './config.json' with { type: 'json' };

ഡൈനാമിക് ഇംപോർട്ട്: const configModule = await import('./config.json', { with: { type: 'json' } }); const config = configModule.default;

`with` കീവേഡ്: കേവലം ഒരു പേരുമാറ്റമല്ല

`assert`-ൽ നിന്ന് `with`-ലേക്കുള്ള മാറ്റം കേവലം ഉപരിപ്ലവമല്ല. ഇത് ഉദ്ദേശ്യത്തിലുള്ള ഒരു അടിസ്ഥാനപരമായ മാറ്റത്തെ പ്രതിഫലിപ്പിക്കുന്നു:

• `assert { type: 'json' }`: ഈ സിന്റാക്സ് ഒരു ലോഡ് ചെയ്തതിനു ശേഷമുള്ള പരിശോധനയെ സൂചിപ്പിച്ചു. എഞ്ചിൻ മൊഡ്യൂൾ ലഭ്യമാക്കുകയും തുടർന്ന് അത് അസേർഷനുമായി പൊരുത്തപ്പെടുന്നുണ്ടോ എന്ന് പരിശോധിക്കുകയും ചെയ്യും. ഇല്ലെങ്കിൽ, അത് ഒരു എറർ നൽകും. ഇത് പ്രാഥമികമായി ഒരു സുരക്ഷാ പരിശോധനയായിരുന്നു.
• `with { type: 'json' }`: ഈ സിന്റാക്സ് ഒരു ലോഡ് ചെയ്യുന്നതിന് മുമ്പുള്ള നിർദ്ദേശത്തെ സൂചിപ്പിക്കുന്നു. ഇത് ഹോസ്റ്റ് എൻവയോൺമെന്റിന് (ബ്രൗസർ അല്ലെങ്കിൽ Node.js) മൊഡ്യൂൾ എങ്ങനെ ലോഡ് ചെയ്യണം, പാഴ്സ് ചെയ്യണം എന്നതിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ തുടക്കത്തിലേ നൽകുന്നു. ഇത് ഒരു പരിശോധന മാത്രമല്ല; അതൊരു നിർദ്ദേശമാണ്.

ഈ വ്യത്യാസം നിർണായകമാണ്. `with` കീവേഡ് ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിനോട് പറയുന്നു, "ഞാൻ ഒരു റിസോഴ്സ് ഇംപോർട്ട് ചെയ്യാൻ ഉദ്ദേശിക്കുന്നു, ലോഡിംഗ് പ്രക്രിയയെ നയിക്കാൻ ഞാൻ നിങ്ങൾക്ക് ആട്രിബ്യൂട്ടുകൾ നൽകുന്നു. ശരിയായ ലോഡർ തിരഞ്ഞെടുക്കാനും ശരിയായ സുരക്ഷാ നയങ്ങൾ തുടക്കം മുതൽ പ്രയോഗിക്കാനും ഈ വിവരങ്ങൾ ഉപയോഗിക്കുക." ഇത് മികച്ച ഒപ്റ്റിമൈസേഷനും ഡെവലപ്പറും എഞ്ചിനും തമ്മിൽ വ്യക്തമായ ഒരു കരാറിനും അനുവദിക്കുന്നു.

ഇതൊരു ഗെയിം ചേഞ്ചർ ആകുന്നത് എന്തുകൊണ്ട്? സുരക്ഷയുടെ പ്രാധാന്യം

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ ഏറ്റവും പ്രധാനപ്പെട്ട നേട്ടം സുരക്ഷയാണ്. റിമോട്ട് കോഡ് എക്സിക്യൂഷനിലേക്ക് (RCE) നയിച്ചേക്കാവുന്ന MIME-ടൈപ്പ് ആശയക്കുഴപ്പം എന്നറിയപ്പെടുന്ന ഒരുതരം ആക്രമണങ്ങളെ തടയാനാണ് ഇവ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.

വ്യക്തമല്ലാത്ത ഇംപോർട്ടുകളിലെ RCE ഭീഷണി

സെർവറിൽ നിന്ന് ഒരു കോൺഫിഗറേഷൻ ഫയൽ ലോഡ് ചെയ്യാൻ ഡൈനാമിക് ഇംപോർട്ട് ഉപയോഗിക്കുന്ന, ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളില്ലാത്ത ഒരു സാഹചര്യം സങ്കൽപ്പിക്കുക:

// സുരക്ഷിതമല്ലാത്ത ഇംപോർട്ട് const { settings } = await import('https://api.example.com/user-settings.json');

`api.example.com`-ലെ സെർവർ ഹാക്ക് ചെയ്യപ്പെട്ടാലോ? ഒരു ദുരുപയോഗം ചെയ്യുന്ന വ്യക്തിക്ക് `user-settings.json` എന്ന എൻഡ്‌പോയിന്റ്, `.json` എക്സ്റ്റൻഷൻ നിലനിർത്തിക്കൊണ്ട് ഒരു ജാവാസ്ക്രിപ്റ്റ് ഫയൽ നൽകുന്ന രീതിയിൽ മാറ്റാൻ കഴിയും. സെർവർ `Content-Type` ഹെഡർ `text/javascript` ആയി എക്സിക്യൂട്ടബിൾ കോഡ് തിരികെ അയയ്ക്കും.

ടൈപ്പ് പരിശോധിക്കാൻ ഒരു സംവിധാനമില്ലാതെ, ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിൻ ആ കോഡ് കാണുകയും അത് പ്രവർത്തിപ്പിക്കുകയും ചെയ്യും, ഇത് ആക്രമണകാരിക്ക് ഉപയോക്താവിന്റെ സെഷനിൽ നിയന്ത്രണം നൽകുന്നു. ഇത് ഗുരുതരമായ ഒരു സുരക്ഷാ വീഴ്ചയാണ്.

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ ഈ അപകടസാധ്യത എങ്ങനെ ലഘൂകരിക്കുന്നു

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ ഈ പ്രശ്നം ലളിതമായി പരിഹരിക്കുന്നു. നിങ്ങൾ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഇംപോർട്ട് എഴുതുമ്പോൾ, നിങ്ങൾ എഞ്ചിനുമായി ഒരു കർശനമായ കരാർ ഉണ്ടാക്കുകയാണ്:

// സുരക്ഷിതമായ ഇംപോർട്ട് const { settings } = await import('https://api.example.com/user-settings.json' with { type: 'json' });

ഇവിടെ എന്താണ് സംഭവിക്കുന്നതെന്ന് നോക്കാം:

1. ബ്രൗസർ `user-settings.json` അഭ്യർത്ഥിക്കുന്നു.
2. ഹാക്ക് ചെയ്യപ്പെട്ട സെർവർ, ജാവാസ്ക്രിപ്റ്റ് കോഡും `Content-Type: text/javascript` ഹെഡറും ഉപയോഗിച്ച് പ്രതികരിക്കുന്നു.
3. ബ്രൗസറിന്റെ മൊഡ്യൂൾ ലോഡർ പ്രതികരണത്തിലെ MIME ടൈപ്പ് (`text/javascript`), ഇംപോർട്ട് ആട്രിബ്യൂട്ടിലെ പ്രതീക്ഷിക്കുന്ന ടൈപ്പുമായി (`json`) പൊരുത്തപ്പെടുന്നില്ലെന്ന് കാണുന്നു.
4. ഫയൽ പാഴ്സ് ചെയ്യുകയോ എക്സിക്യൂട്ട് ചെയ്യുകയോ ചെയ്യുന്നതിനുപകരം, എഞ്ചിൻ ഉടൻ തന്നെ ഒരു `TypeError` നൽകി പ്രവർത്തനം നിർത്തുന്നു, ഇത് ഏതെങ്കിലും ക്ഷുദ്രകരമായ കോഡ് പ്രവർത്തിക്കുന്നത് തടയുന്നു.

ഈ ചെറിയ കൂട്ടിച്ചേർക്കൽ ഒരു RCE അപകടസാധ്യതയെ സുരക്ഷിതവും പ്രവചിക്കാവുന്നതുമായ ഒരു റൺടൈം എറർ ആക്കി മാറ്റുന്നു. ഡാറ്റ ഡാറ്റയായിത്തന്നെ നിലനിൽക്കുന്നുവെന്നും അത് ഒരിക്കലും ആകസ്മികമായി എക്സിക്യൂട്ടബിൾ കോഡായി വ്യാഖ്യാനിക്കപ്പെടുന്നില്ലെന്നും ഇത് ഉറപ്പാക്കുന്നു.

പ്രായോഗിക ഉപയോഗങ്ങളും കോഡ് ഉദാഹരണങ്ങളും

JSON-നുള്ള ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ ഒരു സൈദ്ധാന്തിക സുരക്ഷാ ഫീച്ചർ മാത്രമല്ല. വിവിധ മേഖലകളിലെ ദൈനംദിന വികസന ജോലികളിൽ അവ എർഗണോമിക് മെച്ചപ്പെടുത്തലുകൾ കൊണ്ടുവരുന്നു.

1. ആപ്ലിക്കേഷൻ കോൺഫിഗറേഷൻ ലോഡ് ചെയ്യുന്നു

ഇതാണ് ഏറ്റവും സാധാരണമായ ഉപയോഗം. നേരിട്ടുള്ള ഫയൽ I/O-ക്ക് പകരം, നിങ്ങൾക്ക് ഇപ്പോൾ നിങ്ങളുടെ കോൺഫിഗറേഷൻ നേരിട്ടും സ്റ്റാറ്റിക്കായി ഇംപോർട്ട് ചെയ്യാം.

ഫയൽ: `config.json` { "database": { "host": "db.production.example.com", "port": 5432, "user": "api_user" }, "featureFlags": { "newDashboard": true, "enableLogging": false } }

ഫയൽ: `database.mjs` import config from './config.json' with { type: 'json' }; export function getDbHost() { return config.database.host; } console.log(`Connecting to database at: ${getDbHost()}`);

ഈ കോഡ് വൃത്തിയുള്ളതും ഡിക്ലറേറ്റീവും മനുഷ്യർക്കും ബിൽഡ് ടൂളുകൾക്കും എളുപ്പത്തിൽ മനസ്സിലാക്കാവുന്നതുമാണ്.

2. ഇന്റർനാഷണലൈസേഷൻ (i18n) ഡാറ്റ

വിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് മറ്റൊരു മികച്ച ഉപയോഗമാണ്. നിങ്ങൾക്ക് ഭാഷാ സ്ട്രിംഗുകൾ പ്രത്യേക JSON ഫയലുകളിൽ സൂക്ഷിക്കാനും ആവശ്യാനുസരണം ഇംപോർട്ട് ചെയ്യാനും കഴിയും.

ഫയൽ: `locales/en-US.json` { "welcomeMessage": "Hello, welcome to our application!", "logoutButton": "Log Out" }

ഫയൽ: `locales/es-MX.json` { "welcomeMessage": "¡Hola, bienvenido a nuestra aplicación!", "logoutButton": "Cerrar Sesión" }

ഫയൽ: `i18n.mjs` // സ്ഥിരസ്ഥിതി ഭാഷ സ്റ്റാറ്റിക്കായി ഇംപോർട്ട് ചെയ്യുക import defaultStrings from './locales/en-US.json' with { type: 'json' }; // ഉപയോക്താവിന്റെ താൽപ്പര്യമനുസരിച്ച് മറ്റ് ഭാഷകൾ ഡൈനാമിക്കായി ഇംപോർട്ട് ചെയ്യുക async function getTranslations(locale) { if (locale === 'es-MX') { const module = await import('./locales/es-MX.json', { with: { type: 'json' } }); return module.default; } return defaultStrings; } const userLocale = 'es-MX'; const strings = await getTranslations(userLocale); console.log(strings.welcomeMessage); // സ്പാനിഷ് സന്ദേശം ഔട്ട്പുട്ട് ചെയ്യുന്നു

3. വെബ് ആപ്ലിക്കേഷനുകൾക്കായി സ്റ്റാറ്റിക് ഡാറ്റ ലോഡ് ചെയ്യുന്നു

ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു രാജ്യങ്ങളുടെ ലിസ്റ്റ് ഉപയോഗിച്ച് നിറയ്ക്കുന്നതോ ഒരു ഉൽപ്പന്ന കാറ്റലോഗ് പ്രദർശിപ്പിക്കുന്നതോ സങ്കൽപ്പിക്കുക. ഈ സ്റ്റാറ്റിക് ഡാറ്റ ഒരു JSON ഫയലിൽ കൈകാര്യം ചെയ്യാനും നിങ്ങളുടെ കമ്പോണന്റിലേക്ക് നേരിട്ട് ഇംപോർട്ട് ചെയ്യാനും കഴിയും.

ഫയൽ: `data/countries.json` [ { "code": "US", "name": "United States" }, { "code": "DE", "name": "Germany" }, { "code": "JP", "name": "Japan" } ]

ഫയൽ: `CountrySelector.js` (സാങ്കൽപ്പിക കമ്പോണന്റ്) import countries from '../data/countries.json' with { type: 'json' }; export class CountrySelector { constructor(elementId) { this.element = document.getElementById(elementId); this.render(); } render() { const options = countries.map(country => `${country.name}` ).join(''); this.element.innerHTML = options; } } // ഉപയോഗം new CountrySelector('country-dropdown');

അണിയറയിൽ ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഹോസ്റ്റ് എൻവയോൺമെന്റിന്റെ പങ്ക്

ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ പ്രവർത്തനം നിർവചിക്കുന്നത് ഹോസ്റ്റ് എൻവയോൺമെന്റാണ്. ഇതിനർത്ഥം ബ്രൗസറുകളും Node.js പോലുള്ള സെർവർ-സൈഡ് റൺടൈമുകളും തമ്മിൽ നടപ്പാക്കുന്നതിൽ ചെറിയ വ്യത്യാസങ്ങളുണ്ടെന്നാണ്, ഫലം സ്ഥിരതയുള്ളതാണെങ്കിലും.

ബ്രൗസറിൽ

ബ്രൗസർ പശ്ചാത്തലത്തിൽ, ഈ പ്രക്രിയ HTTP, MIME ടൈപ്പുകൾ പോലുള്ള വെബ് മാനദണ്ഡങ്ങളുമായി കർശനമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.

1. ബ്രൗസർ `import data from './data.json' with { type: 'json' }` കാണുമ്പോൾ, അത് `./data.json`-നായി ഒരു HTTP GET അഭ്യർത്ഥന ആരംഭിക്കുന്നു.
2. സെർവർ അഭ്യർത്ഥന സ്വീകരിക്കുകയും JSON ഉള്ളടക്കം ഉപയോഗിച്ച് പ്രതികരിക്കുകയും വേണം. നിർണായകമായി, സെർവറിന്റെ HTTP പ്രതികരണത്തിൽ `Content-Type: application/json` എന്ന ഹെഡർ ഉണ്ടായിരിക്കണം.
3. ബ്രൗസർ പ്രതികരണം സ്വീകരിക്കുകയും `Content-Type` ഹെഡർ പരിശോധിക്കുകയും ചെയ്യുന്നു.
4. അത് ഹെഡറിന്റെ മൂല്യത്തെ ഇംപോർട്ട് ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയ `type`-മായി താരതമ്യം ചെയ്യുന്നു.
5. അവ പൊരുത്തപ്പെടുന്നുവെങ്കിൽ, ബ്രൗസർ പ്രതികരണ ബോഡി JSON ആയി പാഴ്സ് ചെയ്യുകയും മൊഡ്യൂൾ ഒബ്ജക്റ്റ് ഉണ്ടാക്കുകയും ചെയ്യുന്നു.
6. അവ പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ (ഉദാഹരണത്തിന്, സെർവർ `text/html` അല്ലെങ്കിൽ `text/javascript` അയച്ചാൽ), ബ്രൗസർ ഒരു `TypeError` നൽകി മൊഡ്യൂൾ ലോഡ് നിരസിക്കുന്നു.

Node.js-ലും മറ്റ് റൺടൈമുകളിലും

പ്രാദേശിക ഫയൽ സിസ്റ്റം പ്രവർത്തനങ്ങൾക്കായി, Node.js, Deno എന്നിവ MIME ടൈപ്പുകൾ ഉപയോഗിക്കുന്നില്ല. പകരം, ഫയൽ എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് നിർണ്ണയിക്കാൻ അവ ഫയൽ എക്സ്റ്റൻഷന്റെയും ഇംപോർട്ട് ആട്രിബ്യൂട്ടിന്റെയും സംയോജനത്തെ ആശ്രയിക്കുന്നു.

1. Node.js-ന്റെ ESM ലോഡർ `import config from './config.json' with { type: 'json' }` കാണുമ്പോൾ, അത് ആദ്യം ഫയൽ പാത്ത് തിരിച്ചറിയുന്നു.
2. അതിന്റെ ആന്തരിക JSON മൊഡ്യൂൾ ലോഡർ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ശക്തമായ സൂചനയായി ഇത് `with { type: 'json' }` ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.
3. JSON ലോഡർ ഡിസ്കിൽ നിന്ന് ഫയൽ ഉള്ളടക്കം വായിക്കുന്നു.
4. ഇത് ഉള്ളടക്കം JSON ആയി പാഴ്സ് ചെയ്യുന്നു. ഫയലിൽ അസാധുവായ JSON അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ഒരു സിന്റാക്സ് എറർ നൽകുന്നു.
5. പാഴ്സ് ചെയ്ത ഡാറ്റ `default` എക്സ്പോർട്ടായി ഒരു മൊഡ്യൂൾ ഒബ്ജക്റ്റ് ഉണ്ടാക്കി നൽകുന്നു.

ആട്രിബ്യൂട്ടിൽ നിന്നുള്ള ഈ വ്യക്തമായ നിർദ്ദേശം ആശയക്കുഴപ്പം ഒഴിവാക്കുന്നു. Node.js-ന്, ഉള്ളടക്കം പരിഗണിക്കാതെ തന്നെ, ഫയൽ ജാവാസ്ക്രിപ്റ്റായി എക്സിക്യൂട്ട് ചെയ്യാൻ ശ്രമിക്കരുതെന്ന് കൃത്യമായി അറിയാം.

ബ്രൗസർ, റൺടൈം പിന്തുണ: ഇത് പ്രൊഡക്ഷന് തയ്യാറാണോ?

ഒരു പുതിയ ഭാഷാ ഫീച്ചർ സ്വീകരിക്കുന്നതിന് ലക്ഷ്യം വെക്കുന്ന എൻവയോൺമെന്റുകളിലുടനീളമുള്ള അതിന്റെ പിന്തുണ ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കേണ്ടതുണ്ട്. ഭാഗ്യവശാൽ, JSON-നുള്ള ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകൾ ജാവാസ്ക്രിപ്റ്റ് ഇക്കോസിസ്റ്റത്തിൽ അതിവേഗവും വ്യാപകവുമായ സ്വീകാര്യത നേടിയിട്ടുണ്ട്. 2023-ന്റെ അവസാനത്തോടെ, ആധുനിക എൻവയോൺമെന്റുകളിൽ പിന്തുണ മികച്ചതാണ്.

• Google Chrome / Chromium Engines (Edge, Opera): പതിപ്പ് 117 മുതൽ പിന്തുണയ്ക്കുന്നു.
• Mozilla Firefox: പതിപ്പ് 121 മുതൽ പിന്തുണയ്ക്കുന്നു.
• Safari (WebKit): പതിപ്പ് 17.2 മുതൽ പിന്തുണയ്ക്കുന്നു.
• Node.js: പതിപ്പ് 21.0 മുതൽ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നു. മുൻ പതിപ്പുകളിൽ (ഉദാ. v18.19.0+, v20.10.0+), ഇത് `--experimental-import-attributes` ഫ്ലാഗിന് കീഴിൽ ലഭ്യമായിരുന്നു.
• Deno: ഒരു പുരോഗമന റൺടൈം എന്ന നിലയിൽ, Deno പതിപ്പ് 1.34 മുതൽ ഈ ഫീച്ചർ (അസേർഷനുകളിൽ നിന്ന് വികസിപ്പിച്ചത്) പിന്തുണയ്ക്കുന്നു.
• Bun: പതിപ്പ് 1.0 മുതൽ പിന്തുണയ്ക്കുന്നു.

പഴയ ബ്രൗസറുകളെയോ Node.js പതിപ്പുകളെയോ പിന്തുണയ്‌ക്കേണ്ട പ്രോജക്റ്റുകൾക്കായി, Vite, Webpack (ഉചിതമായ ലോഡറുകൾക്കൊപ്പം), Babel (ഒരു ട്രാൻസ്ഫോം പ്ലഗിൻ ഉപയോഗിച്ച്) പോലുള്ള ആധുനിക ബിൽഡ് ടൂളുകൾക്കും ബണ്ട്ലറുകൾക്കും പുതിയ സിന്റാക്സിനെ അനുയോജ്യമായ ഫോർമാറ്റിലേക്ക് ട്രാൻസ്പൈൽ ചെയ്യാൻ കഴിയും, ഇത് നിങ്ങളെ ഇന്ന് ആധുനിക കോഡ് എഴുതാൻ അനുവദിക്കുന്നു.

JSON-നപ്പുറം: ഇംപോർട്ട് ആട്രിബ്യൂട്ടുകളുടെ ഭാവി

JSON ആദ്യത്തേതും ഏറ്റവും പ്രധാനപ്പെട്ടതുമായ ഉപയോഗമാണെങ്കിലും, `with` സിന്റാക്സ് വികസിപ്പിക്കാവുന്ന തരത്തിലാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഇത് മൊഡ്യൂൾ ഇംപോർട്ടുകളിൽ മെറ്റാഡാറ്റ ചേർക്കുന്നതിനുള്ള ഒരു പൊതു സംവിധാനം നൽകുന്നു, മറ്റ് തരത്തിലുള്ള ജാവാസ്ക്രിപ്റ്റ് ഇതര റിസോഴ്‌സുകളെ ES മൊഡ്യൂൾ സിസ്റ്റത്തിലേക്ക് സംയോജിപ്പിക്കുന്നതിനുള്ള വഴിയൊരുക്കുന്നു.

CSS മൊഡ്യൂൾ സ്ക്രിപ്റ്റുകൾ

അടുത്ത പ്രധാന ഫീച്ചർ CSS മൊഡ്യൂൾ സ്ക്രിപ്റ്റുകളാണ്. ഈ നിർദ്ദേശം ഡെവലപ്പർമാരെ CSS സ്റ്റൈൽഷീറ്റുകൾ നേരിട്ട് മൊഡ്യൂളുകളായി ഇംപോർട്ട് ചെയ്യാൻ അനുവദിക്കുന്നു:

import sheet from './styles.css' with { type: 'css' }; document.adoptedStyleSheets = [sheet];

ഈ രീതിയിൽ ഒരു CSS ഫയൽ ഇംപോർട്ട് ചെയ്യുമ്പോൾ, അത് ഒരു `CSSStyleSheet` ഒബ്ജക്റ്റായി പാഴ്സ് ചെയ്യപ്പെടുന്നു, അത് ഒരു ഡോക്യുമെന്റിലോ ഷാഡോ ഡോമിലോ പ്രോഗ്രാമാറ്റിക്കായി പ്രയോഗിക്കാൻ കഴിയും. ഇത് വെബ് കമ്പോണന്റുകൾക്കും ഡൈനാമിക് സ്റ്റൈലിംഗിനും ഒരു വലിയ മുന്നേറ്റമാണ്, DOM-ലേക്ക് `